<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="6" :md="12" :sm="24">
            <a-form-item label="商家手机/名称">
              <a-input placeholder="请输入商家手机/名称" v-model="queryParam.merchant"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="12" :sm="24">
            <a-form-item label="用户名/手机号">
              <a-input placeholder="请输入用户名/手机号" v-model="queryParam.member"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="12" :sm="24">
            <a-form-item label="技师姓名/手机号">
              <a-input placeholder="请输入技师姓名/手机号" v-model="queryParam.tech"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="12" :sm="24">
            <a-form-item label="项目名">
              <a-input placeholder="请输入项目名" v-model="queryParam.goodsName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="12" :sm="24">
            <a-form-item label="发布时间筛选">
              <a-range-picker @change="panelChange" v-model="queryParamRangePicker" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="6" :md="12" :sm="24">
            <a-form-item label="是否匿名">
              <a-select default-value="1" placeholder="全部" v-model="queryParam.anonymity">
                <a-select-option :value="item.val" v-for="(item, index) in anonymityUl" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>  
          <a-col :xl="6" :lg="6" :md="12" :sm="24">
            <a-form-item label="评价">
              <a-select default-value="1" placeholder="全部" v-model="queryParam.scoreType">
                <a-select-option :value="item.val" v-for="(item, index) in scoreTypeUl" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="24" :lg="24" :md="24" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->

    <!-- table区域-begin -->
    <div>
      <a-table 
        ref="table" 
        size="middle" 
        bordered 
        rowKey="id" 
        :scroll="{ x: 1300 }" 
        :columns="columns" 
        :dataSource="tableData" 
        :pagination="ipagination" 
        :loading="loading" 
        @change="handleTableChange">
        <!--操作-->
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" @click="handleDetail(record)">详情</a-button>
          <a-popconfirm title="确认隐藏?" ok-text="确定" cancel-text="取消" @confirm="handleHide(record.id, 1)">
            <a-button type="danger" v-show="record.hide == 0">隐藏</a-button>
          </a-popconfirm>
          <a-popconfirm title="确认开启?" ok-text="确定" cancel-text="取消" @confirm="handleHide(record.id, 0)">
            <a-button type="primary" v-show="record.hide == 1">开启</a-button>
          </a-popconfirm>
        </span>
        <!--评分-->
        <span slot="score" slot-scope="text, record">
          <a-rate v-model="record.score" disabled allowHalf/>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
  </a-card>
</template>

<script>
import moment from 'moment';

import ApiTree from '@/api/common/evaluateList';
import { Slime, crud } from '@/mixins/slime';
export default {
  name: 'evaluateList',
  mixins: [Slime],
  components: {},
  data() {
    return {
      anonymityUl: [
        { name: '匿名', val: 1 },
        { name: '公开', val: 0 },
      ],
      scoreTypeUl: [
        { name: '好评', val: 1 },
        { name: '中评', val: 2 },
        { name: '差评', val: 3 },
      ],
      tableData: [],
      columns: [
        {
          title: '标题',
          align: 'center',
          dataIndex: 'intro',
        },
        {
          title: '关联商家',
          align: 'center',
          dataIndex: 'merchantName',
        },
        {
          title: '关联技师',
          align: 'center',
          dataIndex: 'techName',
        },
        {
          title: '关联项目',
          align: 'center',
          dataIndex: 'goodsName',
        },
        {
          title: '用户名',
          align: 'center',
          dataIndex: 'memberName',
        },
        {
          title: '评分',
          align: 'center',
          dataIndex: 'score',
          scopedSlots: { customRender: 'score' },
        },
        {
          title: '时间',
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
    };
  },
  created() {
    crud(ApiTree);
    this.loadData();
  },
  methods: {
    // 加载表格数据
    loadData(arg) {
      this.loadDataPack(arg).then((res) => {
        let tableData = [];
        if (res.result) {
          tableData = res.result.records.map((obj)=>{
            return obj = {
              ...obj,
              score: obj.score/10,
            }
          })
        }
        this.tableData = tableData;
      });
    },
    //详情
    handleDetail(record) {
      this.$router.push({ path: '/evaluateDetail?id=' + record.id });
    },
    //改变筛选时间
    panelChange(date) {
      let startTime = moment(date[0]).format('YYYY-MM-DD');
      let endTime = moment(date[1]).format('YYYY-MM-DD');
      this.queryParam = {
        ...this.queryParam,
        startCreateDate: startTime,
        endCreateDate: endTime,
      };
    },
    //隐藏/开启
    handleHide(id, hide){
      const that = this;
      let param = {
        id: id,
        hide: hide,
      }
      ApiTree.getUpdate(param)
      .then((res) => {
        if(res.code == 0){
          that.$message.success('操作成功');
        }else{
          that.$message.warning(res.message);
        }
      }).finally(() => {
        that.loadData();
      });
    },
  },
};
</script>
<style scoped>
</style>